<template>
    <div class="login">
      <div class="nav-bar-box">
        <van-nav-bar
          fixed
          title="登录或注册"
          left-arrow
          @click-left="goBack"
        />
      </div>

      <transition
        enter-active-class="animated fadeInLeft"
        leave-active-class="animated fadeOutLeft" mode="out-in" appear>
        <div>
            <h1>{{message}}</h1>

            <div class="user-name-box">
              <van-cell-group>
                <van-field
                  type="tel"
                  v-model="userName"
                  placeholder="请输入手机号"
                  autocomplete="off"
                  maxlength="11"
                  clearable
                  data-vv-as="手机号"
                  name="userName"
                  v-validate="'required|mobile'"
                />
              </van-cell-group>
            </div>

            <div>
              <van-button type="primary" @click="loginTo">下一步</van-button>
            </div>
        </div>
      </transition>

      <div class="tabbar-box">
        <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
          <van-tabbar-item icon="location-o" to="/login">登录</van-tabbar-item>
          <van-tabbar-item icon="qr" to="/about">关于</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
</template>

<script>
import { loginTo } from "@/api/login";
import {
  NavBar,
  Field,
  CellGroup,
  Button,
  Toast,
  Tabbar,
  TabbarItem
} from "vant";

export default {
  name: "login",
  data() {
    return {
      active: 1,
      message: "这里是登录页面",
      userName: ""
    };
  },
  components: {
    "van-cell-group": CellGroup,
    "van-field": Field,
    "van-button": Button,
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem,
    "van-nav-bar": NavBar
  },
  methods: {
    loginTo() {
      Toast.clear();
      this.$validator.validateAll().then(result => {
        if (result) {
          loginTo({
            name: this.userName
          })
            .then(res => {
              console.log(res);
            })
            .catch();
        } else {
          Toast({
            message: this.$validator.errors.items[0].msg,
            position: "bottom"
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  /*font-size: 40px;*/
}
.user-name-box {
  padding: 20px 0;
}
</style>
